<template>
    <div class="feedback-container">
        <h1>学习反馈</h1>
        <p class="subtitle">请提供您的学习体验反馈</p>

        <el-form label-width="100px" class="feedback-form" :model="classFeedback" ref="classFeedback" :rules="rules">
            <el-form-item label="反馈类型" prop="type">
                <el-select v-model="classFeedback.type" placeholder="请选择反馈类型">
                    <el-option label="课程反馈" value="1"></el-option>
                    <el-option label="教师反馈" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item  v-if="this.classFeedback.type === '1'" label="课程名称" prop="courseId">
                <el-select
                        v-model="classFeedback.courseId"
                        clearable
                        placeholder="请选择课程名称"
                        >
                    <el-option
                            v-for="item in courseOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    />
                </el-select>
            </el-form-item>


            <el-form-item v-if="this.classFeedback.type === '2'" label="教师名称" prop="teachId">
                <el-select
                        v-model="classFeedback.teachId"
                        clearable
                        placeholder="请选择教师名称"
                        >
                    <el-option
                            v-for="item in teachOptions"
                            :key="item.id"
                            :label="item.username"
                            :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="具体反馈" prop="periodFeedback">
                <el-input
                        type="textarea"
                        v-model="classFeedback.periodFeedback"
                        :rows="8"
                        placeholder="请详细描述您的具体体验和建议..."
                ></el-input>
            </el-form-item>
            <div style="justify-content: center;display: flex;">
                <el-button type="primary" @click="submitClassFeedback('classFeedback')">提交反馈</el-button>
            </div>
        </el-form>

        <el-dialog
                title="反馈提交成功"
                v-model="showSuccess"
                width="30%"
                center>
            <div style="text-align:center">
                <i class="el-icon-success" style="font-size:48px;color:#67C23A;margin-bottom:15px;"></i>
                <p>感谢您的宝贵反馈！</p>
                <p>您的意见将帮助我们改进教学质量</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showSuccess = false">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import request from "~/utils/request.js";
    export default {
        name: 'ClassFeedback',
        data() {
            return {
                classFeedback: {
                    courseId: '',
                    teachId: '',
                    type: '',
                    periodFeedback: '',
                    stuId: this.$store.state.user.id,
                },
                courseOptions: [],
                teachOptions: [],
                submitting: false,
                showSuccess: false,
                rules: {
                    type: [
                        {required: true, message: '请选择类型', trigger: 'blur'},
                    ],
                    courseId: [
                        {required: true, message: '请选择课程', trigger: 'blur'},
                    ],
                    teachId: [
                        {required: true, message: '请选择教师', trigger: 'blur'},
                    ],
                    periodFeedback: [
                        {required: true, message: '请输入具体反馈', trigger: 'blur'},
                    ]
                }
            }
        },
        activated() {
            this.getCourseOptions()
            this.getTeachOptions()
        },
        methods: {
            submitClassFeedback(val) {

                this.$refs[val].validate((valid) => {
                    if (valid) {
                        console.log(this.classFeedback)
                        request.post('/stu-feedback/stuFeedbackSave', this.classFeedback).then(res => {
                            if (res.code === "200") {
                                this.showSuccess = true;
                                this.resetForm(val);

                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }
                })


                // console.log(this.classFeedback)

            },
            getCourseOptions() {
                request.get("/course/all").then(res => {
                    this.courseOptions = res.data
                })
            },
            getTeachOptions() {
                request.get("/user/selectTeachers").then(res => {
                    this.teachOptions = res.data
                })
            },
            handleUploadSuccess(response, file, fileList) {
                this.classFeedback.fileList = fileList;
            },

            handleRemove(file, fileList) {
                this.classFeedback.fileList = fileList;
            },

            handleExceed(files, fileList) {
                this.$message.warning(`最多只能上传3张照片，您已选择了${fileList.length}张`);
            },

            resetForm(val) {
                this.classFeedback = {
                    courseId: '',
                    teachId: '',
                    type: '',
                    periodFeedback: '',
                    stuId: this.$store.state.user.id,
                };
                this.$refs[val].resetFields();
            }
        }
    }
</script>

<style scoped>
    .feedback-container {
        height: 70vh;
        max-width: 600px;
        margin: 10px auto;
        padding-top: 30px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    h1 {
        text-align: center;
        color: #303133;
        font-size: 25px;
    }

    .subtitle {
        text-align: center;
        color: #909399;
    }

    .feedback-form {
        margin-top: 10px;
        padding: 0 20px;
    }
</style>
